<template>
	<view class="user" :style="[pageStyle]" :class="themeName">
		<view v-for="(item, index) in pagesData" :key="index">
			<template v-if="item.name=='userinfo'">
				<w-userinfo v-show="item.show" :content="item.content" :styles="item.styles" :percent="percent"
					:title="styles.title" />
			</template>
			<template v-if="item.name=='userorder'">
				<w-userorder v-show="item.show" :content="item.content" :styles="item.styles" />
			</template>
			<view v-if="item.name=='communitygrouppurchaseorder' && userInfo.cgp_enabled">
				<w-communitygrouppurchaseorder :styles="item.styles" />
			</view>
			<template v-if="item.name=='userserve'">
				<w-userserve v-show="item.show" :content="item.content" :styles="item.styles" />
			</template>
			<template v-if="item.name=='goodsrecom'">
				<w-goodsrecom v-show="item.show" :content="item.content" :styles="item.styles" />
			</template>
		</view>
		<w-jishuzhichi />
		<tabbar />
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		apiGetPage
	} from '@/api/store'
	import Cache from '@/utils/cache'
	export default {
		data() {
			return {
				styles: {},
				pagesData: [],
				percent: 0
			}
		},
		methods: {
			...mapActions(['getUser']),
			getPage() {
				apiGetPage({
					type: 3,
					clsp_id: Cache.get('clsp_id')
				}).then(res => {
					const {
						common: {
							title
						},
						common,
						content
					} = this.$zhTran(res);
					uni.setNavigationBarTitle({
						title
					});
					this.styles = common
					this.pagesData = content
				})
			},
		},
		computed: {
			pageStyle() {
				const {
					background_color,
					background_image,
					background_type,
				} = this.styles
				if (background_type == 0 || !background_image || !background_color) {
					return
				}
				const style = background_type == 1 ? {
					'background-color': background_color
				} : {
					'background-image': `url(${background_image})`
				}
				return style
			}
		},
		watch: {
			'userInfo.cert_type'(val) {
				if (val == 2) {
					uni.showModal({
						content: this.$zhTran('当前账号未通过会员认证，将会影响部分功能使用'),
						confirmColor: this.themeColor,
						confirmText: this.$zhTran('前往认证'),
						success: ({
							confirm
						}) => {
							if (confirm) {
								this.$Router.push({
									path: '/bundle/pages/user_cert/user_cert',
									query: {
										user_id: this.userInfo.id,
									}
								})
							}
						}
					})
				}
			}
		},
		onShow() {
			this.getPage()
			this.getUser()
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
		},
		onPullDownRefresh() {
			this.getPage()
			this.getUser().finally(() => {
				uni.stopPullDownRefresh();
			})
		},
	}
</script>

<style lang="scss" scoped>
</style>